<template>
    <div class="page-drawer">
        <el-drawer
            close-on-press-escape
            close-on-click-modal
            v-model="props.value"
            title="抽屉"
            :destroy-on-close="true"
            :direction="props.direction"
            :before-close="handleClose"
        >
            <el-form
                :label-position="true"
                label-width="100px"
                style="max-width: 460px"
            >
                <el-form-item label="用户名：">
                    <el-input class="input w-full max-w-xs" v-model="form.nickName" />
                </el-form-item>
                <el-form-item label="账号：">
                    <el-input class="input w-full max-w-xs" v-model="form.username" />
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input
                        show-password
                        type="password"
                        class="input w-full max-w-xs"
                        v-model="form.password"
                    />
                </el-form-item>
                <el-form-item label="头像：">
                    <el-upload
                        class="avatar-uploader"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        :show-file-list="false"
                        :on-success="true"
                        :before-upload="true"
                    >
                        <img v-if="imageUrl" :src="form.avatar" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="确认：">
                    <div class="btn" @click="submit">提交</div>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script lang="ts" setup>
import { ElMessageBox, ElMessage } from 'element-plus';

const props=defineProps(["form","direction","value"])


const imageUrl = '';

const emit = defineEmits(['handleCloseEdit', 'handleSubmitEdit']);

const handleClose = (done: () => void) => {
    ElMessageBox.confirm('您确认要关闭对话框吗？')
        .then(() => {
            emit('handleCloseEdit', false);
        })
        .catch(() => {
            ElMessage({
                message: '已取消',
                type: 'warning',
            });
        });
};

const submit = () => {
    ElMessageBox.confirm('您确认要进行提交操作吗？')
        .then(() => {
            emit('handleSubmitEdit', { ...props.form });
        })
        .catch(() => {
            ElMessage({
                message: '已取消',
                type: 'warning',
            });
        });
};
</script>

<style scoped lang="less">
.avatar-uploader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border: 1px dashed #999;
    border-radius: 12px;
    cursor: pointer;
    margin-left: 20px;

    i {
        width: 100%;
    }
}

.btn {
    width: 130px;
    margin-left: 20px;
}
</style>
